<template>
<div>
  <el-header>
  <el-form ref="form" :model="search" label-width="80px">
    <el-col :span="12">
    <el-form-item label="名称" :span="12" style="width: 700px;">
      <el-input v-model="search.key"></el-input>
    </el-form-item>
    </el-col>
    <el-col :span="12">
    <el-form-item label="所属大区"  style="width: 500px;">
        <el-select v-model="search.area" placeholder="请选择">
          <el-option
            v-for="item in getDicA"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
    </el-form-item>
    </el-col>

      <el-col span="12">
        <el-form-item label="活动时间">
        <el-col span="12">
      <el-date-picker type="date" placeholder="选择日期" v-model="search.startDate" style="width: 90%;"></el-date-picker>-
        </el-col>
        <el-col span="12">
      <el-date-picker type="date" placeholder="选择日期" v-model="search.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
        </el-form-item>
      </el-col>
    <el-col span="12">
      <el-form-item label="商业范围"  style="width: 500px;">
        <el-select v-model="search.area" placeholder="请选择">
          <el-option
            v-for="item in getDicC"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>

  </el-form>
  </el-header>
  <el-main>
    <template>
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </template>
  </el-main>
</div>
</template>

<script>
export default {
  name: 'CoopView',
  data () {
    return {
      dic: [],
      area: [],
      coop: [],
      search: {
        page: 1,
        pageSize: 5,
        key: '',
        area: 0,
        startDate: '',
        endDate: '',
        cope: 0,
        total: ''
      },
      list: []
    }
  },
  computed: {
    getDicA () {
      return this.dic.filter(x => { return x.tid === 2 })
    },
    getDicC () {
      return this.dic.filter(x => { return x.tid === 1 })
    }

  },
  mounted () {
    this.axios.get('/dic/getDic').then(res => {
      this.dic = res.data
    })
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>
